<div id="wrapper" class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h5>
      </div>
      <div class="text-right col col-md-6">
        <button
          *abpPermission="'AbpTenantManagement.Tenants.Create'"
          id="create-tenants"
          class="btn btn-primary"
          type="button"
          (click)="addTenant()"
        >
          <i class="fa fa-plus mr-1"></i>
          <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
        </button>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div id="data-tables-table-filter" class="data-tables-filter">
      <label
        ><input
          type="search"
          class="form-control form-control-sm"
          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
          (input.debounce)="onSearch($event.target.value)"
      /></label>
    </div>
    <abp-table
      *ngIf="[150, 0] as columnWidths"
      [abpLoading]="loading"
      [abpLoadingDelay]="500"
      [abpTableSort]="{ key: sortKey, order: sortOrder }"
      [colgroupTemplate]="tableColGroup"
      [headerTemplate]="tableHeader"
      [bodyTemplate]="tableBody"
      [value]="data$ | async"
      [abpTableSort]="{ key: sortKey, order: sortOrder }"
      [rows]="pageQuery.maxResultCount"
      [totalRecords]="totalCount$ | async"
      [scrollable]="true"
      (pageChange)="onPageChange($event)"
    >
      <ng-template #tableColGroup>
        <colgroup>
          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width || undefined }" />
        </colgroup>
      </ng-template>
      <ng-template #tableHeader let-columns>
        <tr>
          <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
          <th (click)="sortOrderIcon.sort('name')">
            {{ 'AbpTenantManagement::TenantName' | abpLocalization }}
            <abp-sort-order-icon
              #sortOrderIcon
              sortKey="name"
              [(selectedSortKey)]="sortKey"
              [(order)]="sortOrder"
            >
            </abp-sort-order-icon>
          </th>
        </tr>
      </ng-template>
      <ng-template #tableBody let-data>
        <tr>
          <td class="text-center">
            <div ngbDropdown container="body" class="d-inline-block">
              <button
                class="btn btn-primary btn-sm dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                ngbDropdownToggle
              >
                <i class="fa fa-cog mr-1"></i>{{ 'AbpTenantManagement::Actions' | abpLocalization }}
              </button>
              <div ngbDropdownMenu>
                <button
                  *abpPermission="'AbpTenantManagement.Tenants.Update'"
                  ngbDropdownItem
                  (click)="editTenant(data.id)"
                >
                  {{ 'AbpTenantManagement::Edit' | abpLocalization }}
                </button>
                <button
                  *abpPermission="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
                  ngbDropdownItem
                  (click)="onEditConnectionString(data.id)"
                >
                  {{ 'AbpTenantManagement::Permission:ManageConnectionStrings' | abpLocalization }}
                </button>
                <button
                  *abpPermission="'AbpTenantManagement.Tenants.ManageFeatures'"
                  ngbDropdownItem
                  (click)="providerKey = data.id; visibleFeatures = true"
                >
                  {{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}
                </button>
                <button
                  *abpPermission="'AbpTenantManagement.Tenants.Delete'"
                  ngbDropdownItem
                  (click)="delete(data.id, data.name)"
                >
                  {{ 'AbpTenantManagement::Delete' | abpLocalization }}
                </button>
              </div>
            </div>
          </td>
          <td>{{ data.name }}</td>
        </tr>
      </ng-template>
    </abp-table>
  </div>
</div>

<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
  <ng-template #abpHeader>
    <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
  </ng-template>

  <ng-template #abpFooter>
    <button #abpClose type="button" class="btn btn-secondary">
      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
    </button>
    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{
      'AbpIdentity::Save' | abpLocalization
    }}</abp-button>
  </ng-template>
</abp-modal>

<ng-template #tenantModalTemplate>
  <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
    <div class="mt-2">
      <div class="form-group">
        <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
        <input type="text" id="name" class="form-control" formControlName="name" autofocus />
      </div>
    </div>
  </form>
</ng-template>

<ng-template #connectionStringModalTemplate>
  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()" validateOnSubmit>
    <div class="form-group">
      <div class="custom-checkbox custom-control mb-2">
        <input
          id="useSharedDatabase"
          type="checkbox"
          class="custom-control-input"
          formControlName="useSharedDatabase"
          autofocus
          (ngModelChange)="onSharedDatabaseChange($event)"
        />
        <label for="useSharedDatabase" class="custom-control-label">{{
          'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
        }}</label>
      </div>
    </div>
    <div class="form-group" *ngIf="!useSharedDatabase">
      <label for="defaultConnectionString">{{
        'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
      }}</label>
      <input
        type="text"
        id="defaultConnectionString"
        class="form-control"
        formControlName="defaultConnectionString"
      />
    </div>
  </form>
</ng-template>

<abp-feature-management
  *abpReplaceableTemplate="{
    inputs: {
      providerName: { value: 'T' },
      providerKey: { value: providerKey },
      visible: { value: visibleFeatures, twoWay: true }
    },
    outputs: { visibleChange: onVisibleFeaturesChange },
    componentKey: 'FeatureManagement.FeatureManagementComponent'
  }"
  [(visible)]="visibleFeatures"
  providerName="T"
  [providerKey]="providerKey"
>
</abp-feature-management>
